<template>
	<view class="searchBox">
		<view class="searchInput">
			<uni-icons class="search_icon" color="#707070" size="18" type="search" />
			<input class="uni-input" v-model="inputVal" placeholder-style="rgba($color: #43425D, $alpha:0.5)" confirm-type="search"
			 placeholder="输入客户名称或手机号" @input="inputFun" @blur="inputFun" @confirm="_inputSearch" />
			<uni-icons class="clear_icon" color="#999999" size="18" type="clear" @click="_clearInput" />
		</view>
		<!-- <view class="searchTitle" @click="_inputSearch">{{inputVal.length?'取消':'搜索'}}</view> -->
		<view class="searchTitle" @click="_inputSearch">搜索</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons
		},
		data() {
			return {
				inputVal: ''
			}
		},
		onLoad() {

		},

		methods: {
			_clearInput() {
				this.inputVal = ''
				this._inputSearch()
			},

			inputFun(e) {
				this.inputVal = e.target.value
			},

			_inputSearch() {
				this.$emit('inputSearch', this.inputVal)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.searchBox {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		display: -webkit-flex;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;

		.searchInput {
			width: 90%;
			position: relative;
			box-sizing: border-box;

			.search_icon {
				position: absolute;
				top: 10rpx;
				left: 20rpx;
			}

			.uni-input {
				width: 100%;
				height: 60rpx;
				background: #F5F6FA;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 54rpx;
				color: #43425D;
				padding: 0 78rpx 0 78rpx;
			}

			.clear_icon {
				position: absolute;
				top: 10rpx;
				right: 20rpx;
				cursor: pointer;
				z-index: 9;
			}
		}

		.searchTitle {
			font-size: 28rpx;
			color: #43425D;
		}
	}
</style>
